<template>
    <div class="administer">
        <div class="administerNav">
            <backHeader></backHeader>
        </div>
        <div class="administerCont">
           <div class="html_pst productRelease">
                <div class="release">
                    <el-form :inline="true" class="demo-form-inline lampData">
                        <el-form-item label="品牌名称" class="witd wid150">
                            <el-select v-model="request.brandId">
                                <el-option label="全部" value=""></el-option>
                                <el-option v-for="item in lampBrandList" :key="item.id" :label="item.brandName" :value="item.id"></el-option> 
                            </el-select>
                        </el-form-item>
                        <el-form-item label="系列名称" class="witd wid150">
                            <el-input v-model="request.seriesNameLike"></el-input>
                        </el-form-item>
                         <el-form-item label="灯具型号" class="witd wid150">
                            <el-input v-model="request.modelNameLike"></el-input>
                        </el-form-item>
                        <el-form-item label="灯具类型" class="witd wid150">
                            <el-select v-model="request.lumType">
                                <el-option label="全部" value=""></el-option>
                                <el-option v-for="item in lampTypeList" :key="item.id" :label="item.lampName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="功率(W)"  class="power atuo">
                            <el-input v-model="request.lumPowerMin"></el-input>-
                            <el-input v-model="request.lumPowerMax"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="色温色彩：" class="witd wid150">
                            <el-select v-model="request.colorFlagId">
                                <el-option label="全部" value=""></el-option>
                                <el-option v-for="item in colorFlagList" :key="item.id" :label="item.dictCont" :value="item.id" v-html="item.dictCont"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="光束角(°)" class="power atuo">
                            <el-input v-model="request.lightAngleMin"></el-input>-
                            <el-input v-model="request.lightAngleMax"></el-input>
                        </el-form-item>
                        
                        <el-form-item label="控制方式：" class="witd wid150">
                                <el-popover ref="popover6" placement="bottom" width="60" trigger="focus" popper-class="acves">
                                     <ul class="wid100">
                                        <li v-for="(item, index) in kongzhifangshiList"
                                            style="cursor: pointer;"
                                            :data-index="index"
                                            @click="setcontrolTypeStrLike(item)"
                                            :key="index">
                                            {{item.dictCont}}
                                        </li>
                                    </ul>
                                </el-popover>
                                <el-input v-model="request.controlTypeStrLike" v-popover:popover6 ></el-input>
                        </el-form-item>
                        <el-form-item label="发布状态" class="witd wid150">
                            <el-select v-model="request.isPublic">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="未发布" value="0"></el-option>
                                <el-option label="已发布" value="1"></el-option>                            
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search(1)">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="zkbtn">
                    <span class="btn" @click="productPush(1)">产品发布</span>
                    <span class="btn" @click="productPush(0)">撤销发布</span>
                    <span class="btn" @click="gotoedit()">修改</span>
                    <span class="list_S"  ><el-button slot="reference"  @click="showSetDiv()"><img src="@/assets/images/icon9_27.png" alt="">列表显示项</el-button></span>
                </div>
                <div class="release2">
                    <el-table :data="tableData" border style="width: 100%" 
                    @selection-change="handleSelectionChange"
                    @row-click="clickRow"
                    fit
                    highlight-current-row
                    :max-height="tableHeight_s2">
                    <el-table-column  type="selection" width="55" :key="Math.random()"></el-table-column>
                        <el-table-column v-for="(item) in showHideList" v-if="item.isDefault" :key="Math.random()" :prop="item.attrIndex" :label="item.attrName">
                            <template slot-scope="scope">
                                <template v-if="item.valType == 'image'">
                                    <img @click.stop="viewPicture(ImgPath+scope.row[item.attrIndex])" v-if="scope.row[item.attrIndex] != null && scope.row[item.attrIndex] != ''" :src="ImgPath + scope.row[item.attrIndex]"  width="100" height="100" />
                                </template>
                                <a target="_blank" :href="ImgPath + scope.row[item.attrIndex]"  v-else-if="item.valType == 'file'"> <i  class="avatar-uploader-icon el-icon-notebook-2"></i></a>
                                <span v-else-if="item.attrName == '效果描述' || item.attrName == '产品标签'">
                                    <el-popover placement="top" trigger="hover" width="400">
                                       {{(scope.row[item.attrIndex])}}
                                        <div slot="reference"><span id="wenzi2">{{getSubStr(scope.row[item.attrIndex])}}</span></div>
                                    </el-popover>
                                    <!-- <span :alt="scope.row[item.attrIndex]">{{getSubStr(scope.row[item.attrIndex])}}</span> -->
                                </span>
                                <span v-else>{{scope.row[item.attrIndex]}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="发布状态">
                            <template slot-scope="scope">
                                <span>{{scope.row.isPublic == 0 ? '未发布' : '已发布'}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="padding:10px;text-align:center">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="request.page"
                            :page-sizes="[20, 50, 100, 200]"
                            :page-size="20"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalCount">
                        </el-pagination>
                    </div>
                </div>
           </div>
        </div>
    
    <el-dialog
      :visible.sync="showListShowHideSetDiv"
      v-dialogDrag
      title="列表显示项"
      custom-class="dynamic-class list_SAS list_SASes">
      <div class="contcheck">
        <el-form>
          <el-form-item>
            <div class="cont">
              <div class="conts">
                <div style="cursor:pointer" v-for="(item,index) in showHideList" 
                  :key="index"
                  @click="changeColumn(index,item)" class="li_list">
                  <input type="checkbox" :id="'checkbox_'+index" :checked="item.isDefault ? 'checked' : ''" /><span>{{item.attrName}}</span>
                </div>
              </div>
            </div>
            <div style="clear:both" class="btn">
              <el-button
                style="width:100px;padding:10px"
                type="primary"
                @click="showListShowHideSetDiv = false"
              >确定</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="showPic"  v-dialogDrag custom-class="dee imgsAMG">
      <img :src="showPicUrl" />
    </el-dialog>
    </div>
</template>
<script>
import backHeader from '@/views/common/backHeader.vue'
export default {
    data(){
        return{
            kongzhifangshiList:[],
            showHideList:[
                {
                    isDefault:true,
                    attrIndex:"waiGuanPic",
                    attrName:"灯具外观图",
                    valType:'image'
                },
                {
                    isDefault:true,
                    attrIndex:"brandName",
                    attrName:"品牌",
                },
                {
                    isDefault:true,
                    attrIndex:"modelName",
                    attrName:"灯具型号",
                },
                {
                    isDefault:true,
                    attrIndex:'lumPower',
                    attrName:'功率',
                },
                {
                    isDefault:true,
                    attrIndex:'colorTemp',
                    attrName:'色温色彩',
                },
                {
                    isDefault:true,
                    attrIndex:'lightAngle',
                    attrName:'光束角',
                },
                {
                    isDefault:true,
                    attrIndex:'guangTongLiang',
                    attrName:'光通量',
                },
                {
                    isDefault:true,
                    attrIndex:'controlType',
                    attrName:'控制方式',
                },
                {
                    isDefault:true,
                    attrIndex:'referPrice',
                    attrName:'参考价',
                }
            ],
            showShowHideButton:false,
            showListShowHideSetDiv: false,
            lampTypeList:[],
            request:{
                controlTypeStrLike:'',
                brandId:'',
                isPublic:'',
                page:1,
                pageSize:20,
                colorFlagId:'',
            },
            colorFlagList:[],
            tableData:[],
            totalCount:0,
            currentEditRow:{},
            tableHeight_s2:400,
            multipleSelection:[],
            lampBrandList:[],
            
      showPic: false, //查看图片
      showPicUrl: "", //图片地址
        }
    },
    created(){
        let self = this
            //加载灯具类型
            this.$http.get("/api/lampTypes/json", {}, function(res) {
                if (res.success) {
                    self.lampTypeList = res.data;
                }
            });
            
            //加载色温色彩
            this.$http.get("/api/banner/dicts/dictTypeAllList", {indexPinyin:"chanpinsewenyanse"}, function(res) {
                if (res.success) {
                    self.colorFlagList = res.data;
                }
            });
        this.search(1)
            this.$http.postQuery('/api/brands/json',{isOrgState: true},function(res){
                if(res.success){
                    self.lampBrandList = res.data;
                }
            })
            
            //控制方式：
            this.$http.get("/api/dictTypeAllList", {indexPinyin:'chanpinkexuankongzhifangshi'}, function(res) {
                if (res.success) {
                    self.kongzhifangshiList = res.data;
                }
            });
    this.loadShowHideList()
    },
    watch:{
        // "request.lumType":function(val){
        //     if(val == ''){
        //         this.showShowHideButton = false
        //     }else{
        //         this.searchShowHideList();
        //         this.showShowHideButton = true
        //     }
        // }
    },
    methods:{
        
            getSubStr(val){
                var str = val
                if(val.length > 30){
                    str = val.substring(0,30)+"..."
                }
                return str
            },
        setcontrolTypeStrLike(item){
            this.request.controlTypeStrLike = item.dictCont
            this.$refs.popover6.doClose()
        },
        viewPicture(url){
            this.showPic = true
            this.showPicUrl = url
        },
        
    loadShowHideList(){
        let self = this
        this.$http.get('/api/stlamps/attributes',{},function(res){
            if(res.success){
                self.showHideList = res.data
            }
        })
    },
        changeColumn(index,item){
          item.isDefault = !item.isDefault;
        },
         showSetDiv() {
      this.showListShowHideSetDiv = true;
    },
        searchShowHideList(){
            let self = this
            if(this.request.lumType != null && this.request.lumType != ''){
                this.$http.get('/api/stlamps/attributes/'+this.request.lumType,{},function(res){
                    if(res.success){
                        self.showHideList = res.data
                    }
                })
            }
        },
        search(page){
            this.request.page = page
            let self = this
            this.$http.postQueryObj('/api/stlamps/pageJson',{isOrgState:true},this.request,function(res){
                if(res.success){
                    self.tableData = res.data.rows
                    self.totalCount = res.data.total
                }
            })
        },
        handleSizeChange(pageSize){
            this.request.rows = pageSize
            this.search(1)
        },
        handleCurrentChange(page) {
            this.search(page)
        },
        clickRow(item){
            this.currentEditRow = item
            console.log(item)
        },
        gotoedit(){
            if(this.multipleSelection.length == 0){
                this.$message.error('请选择数据！')
                return false
            }
            if(this.multipleSelection.length >1){
                this.$message.error('只能选择一条')
                return false
            }
            this.$router.push('/productInformation?id='+this.multipleSelection[0].id+"&seriesId="+this.multipleSelection[0].seriesId)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        productPush(type){
             if(this.multipleSelection.length == 0){
                this.$message.error('请选择数据！')
                return false
            }
            var ids = ''
            for(var i = 0;i<this.multipleSelection.length;i++){
                ids += this.multipleSelection[i].id + ","
            }
            ids = ids.substring(0,ids.length-1)
            //0 未发布 1 已发布
                let self = this
                this.$http.postQuery('/api/stlamps/publish/'+type,{ids:ids},function(res){
                    if(res.success){
                        self.$message({
                            message: "操作成功！",
                            type: "success"
                        });
                        self.search(1)
                    }else{
                        self.$message.error(res.data)
                    }
                })
           
        },
    },
     components: {
          backHeader
     },
     mounted(){
        this.$nextTick(function () {
            this.tableHeight_s2 = window.innerHeight - 400;
            
            // 监听窗口大小变化
            let self = this;
            window.onresize = function() {
                self.tableHeight_s2 = window.innerHeight - 400
            }
        })
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.li_list{
             width: 25%;
            float: left;
            margin-right: 0;
            input{
              position: relative;
              top: 2px;
              margin-right: 3px;
            }
}
.release{
 .witd{
     .el-form-item__content{
         width: 150px;
     }
     
 }
  .el-button--primary {
    background-color: #5b65a1;
    border-radius: 4px;
    border: none;
}
}
.zkbtn{
    text-align: right;
    span.btn{
        display: inline-block;
        padding: 5px 12px;
        border-radius: 4px;
        border: 1px solid #ccc;
        margin-right: 12px;
        cursor: pointer;
        &:hover{
                color: #409EFF;
                border-color: #c6e2ff;
                background-color: #ecf5ff;
        }
    }
    .list_S{
        display: inline-block;
        button{
             padding: 5px 12px 5px;
             height: 36px;
             position: relative;
        }
        img{
            display: inline-block;
            top: 3px;
            // left: 6px;
            height: 16px;
        }
    }
} 
.release2{
    margin-top: 20px;
    td{
        img{
            width: auto;
            height: auto;
        }
    }
}
</style>